//顶部导航条
var nav_product = document.querySelector(".nav_product");
var nav_product_ul = document.createElement("ul");
var ul_second = document.createElement("ul");
nav_product.addEventListener("click",function(){
		nav_product.style.backgroundColor = "#d2d2d2";
		nav_product_ul.innerHTML = `
			<li>男士腕表系列<i class="iconfont icon-xiangyoujiantou"></i></li>
			<li>女士腕表系列<i class="iconfont icon-xiangyoujiantou"></i></li>
		`;
		nav_product_ul.className = "nav_product_ul";
		nav_product.appendChild(nav_product_ul);
		// nav_product_ul.querySelector("li").addEventListener("click",function(){
		// 	window.location.href = "index.html"
		// })
		
		
		console.log(nav_product_ul.querySelectorAll("li"));
		// var aa = nav_product_ul.querySelectorAll("li");
		nav_product_ul.querySelectorAll("li").forEach(function(val){
			val.addEventListener("click",function(){
				ul_second.innerHTML = `
				<li>男士腕表系列<i class="iconfont icon-xiangyoujiantou"></i></li>
				<li>女士腕表系列<i class="iconfont icon-xiangyoujiantou"></i></li>
				`;
				ul_second.className = "nav_product_ul_second";
				val.appendChild(ul_second);
				console.log(val);
			})
					
			
		})
		
})
// nav_product.addEventListener("mouseleave",function(){
// 	nav_product.style.backgroundColor = "white"
// 	nav_product_ul.remove();
// })


//手表筛选条件事件
var screen = document.querySelector(".screen>span");
var man = document.querySelector(".man");
var woman = document.querySelector(".woman");
var product_ul = document.querySelector(".product_left>ul")
var screen_li = document.createElement("li")
screen.addEventListener("click",function(){
	if(screen.innerText == "-"){
		screen.innerText = "+"
		screen.parentElement.style.backgroundColor = "#eaeaea";
		screen.parentElement.style.color = "black"
		screen.style.color = "black";
		screen_li.remove()
	}else{
		screen.innerText = "-";
		screen.style.color = "white"
		screen.parentElement.setAttribute("style","height: auto;background-color:#212121 ;color: white;transition: all 1s;")
		// screen.parentElement.style.height = "auto"
		// screen.parentElement.style.backgroundColor = "#212121";
		// .style.color = "white";
		screen_li.innerHTML = `
			<ul class="screen_li">
				<li>尺寸<span>+</span></li>
				<li>功能<span>+</span></li>
				<li>材质<span>+</span></li>
				<li>价格<span>+</span></li>
			</ul>
		`;
		screen_li.style.backgroundColor = "#212121";
		screen_li.setAttribute("style","border-top: 1px solid #3c3c3c;transition: all 1s;")
		product_ul.children[1].appendChild(screen_li);
		screen_li.querySelector(".screen_li").addEventListener("click",function(){
			console.log(1);
		})
	}
})
var man_li = document.createElement("li");
man.addEventListener("click",function(){
	if(man.querySelector("span").innerText == "-"){
		man.querySelector("span").innerText = "+";
		man.style.color = "black"
		man_li.remove()
	}else{
		man.querySelector("span").innerText = "-"
		man.style.height = "auto"
		man.style.color = "#9a9a9a";
		man_li.innerHTML = `
			<ul class="man_li">
				<li>男士腕表1</li>
				<li>男士腕表2</li>
				<li>男士腕表3</li>
				<li>男士腕表4</li>
				<li>男士腕表5</li>
			</ul>
		`;
		man_li.setAttribute("style","border-top: 1px solid #cfcfcf;color: black;")
		product_ul.children[3].appendChild(man_li);
	}
})
var woman_li = document.createElement("li");
woman.addEventListener("click",function(){
	if(woman.querySelector("span").innerText == "-"){
		woman.querySelector("span").innerText = "+";
		woman.style.color = "black"
		woman_li.remove()
	}else{
		woman.querySelector("span").innerText = "-"
		woman.setAttribute("style","height: auto;color: #9a9a9a;")
		woman_li.innerHTML = `
			<ul class="woman_li">
				<li>女士腕表1</li>
				<li>女士腕表2</li>
				<li>女士腕表3</li>
				<li>女士腕表4</li>
				<li>女士腕表5</li>
			</ul>
		`;
		woman_li.setAttribute("style","border-top: 1px solid #cfcfcf;color: black;")
		product_ul.children[4].appendChild(woman_li);
	}
})